<template>
  <!-- 卡片快捷按钮 Begin -->
  <div class="m-t-50px">
    <el-row :gutter="30">
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <div class="border-2px border-solid border-[--el-color-primary] <md:m-b-6px">
          <div class="m-10px h-200px <md:h-300px pos-relative">
            <el-image :src="card1Url" fit="cover" class="w-100% h-100%">
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
              </template>
            </el-image>
            <div
              class="bg-#fff dark:bg-#333 hover:bg-#f5f5f5 hover:dark:bg-#222 p-y-15px p-x-10px pos-absolute top-35% left-20% text-center w-56% shadow-[--el-box-shadow-light]"
              @click="handleContact"           
            >
              <div
                class="capitalize select-none font-600 text-16px text-#000 dark:text-#D8D8D8"
                style="font-family: 'Open Sans', sans-serif"
              >
                About Us
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <div class="border-2px border-solid border-[--el-color-primary] <md:m-b-6px">
          <div class="m-10px h-200px <md:h-300px pos-relative">
            <el-image :src="card2Url" fit="cover" class="w-100% h-100%">
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
              </template>
            </el-image>
            <div
              class="bg-#fff dark:bg-#333 hover:bg-#f5f5f5 hover:dark:bg-#222 p-y-15px p-x-10px pos-absolute top-35% left-20% text-center w-56% shadow-[--el-box-shadow-light]"
              @click="handleBillbill"
            >
              <div
                class="capitalize select-none font-600 text-16px text-#000 dark:text-#D8D8D8"
                style="font-family: 'Open Sans', sans-serif"
              >
               Billbill
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <div class="border-2px border-solid border-[--el-color-primary] <md:m-b-6px">
          <div class="m-10px h-200px <md:h-300px pos-relative">
            <el-image :src="card3Url" fit="cover" class="w-100% h-100%">
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
              </template>
            </el-image>
            <div
              class="bg-#fff dark:bg-#333 hover:bg-#f5f5f5 hover:dark:bg-#222 p-y-15px p-x-10px pos-absolute top-35% left-20% text-center w-56% shadow-[--el-box-shadow-light]"
              @click="handleGitee" 
            >
              <div
                class="capitalize select-none font-600 text-16px text-#000 dark:text-#D8D8D8"
                style="font-family: 'Open Sans', sans-serif"
              >
                Gitee
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 卡片快捷按钮 End -->
</template>

<script setup lang="ts">
import errorUrl from "@/assets/images/error/404.png";
import card1Url from "@/assets/images/blog/card/card1.png";
import card2Url from "@/assets/images/blog/card/card2.png";
import card3Url from "@/assets/images/blog/card/card3.png";
import { useRouter } from "vue-router";

const router = useRouter();

const handleContact = () => {
  router.push("/contact");
};
const handleBillbill = () => {
  window.open("https://www.bilibili.com/");
};

const handleGitee = () => {
  window.open("https://gitee.com/BigCatHome/koi-ui");
};
</script>

<style scoped></style>
